/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
/* eslint-disable no-nested-ternary */
import React, { Fragment } from 'react';
import { Dispatch } from 'redux';
import { connect } from 'dva';

import PageHeader from '@/components/PageHeader';

import {
    Card,
    Descriptions,
    Table,
} from 'antd';


import { watermark } from '@/utils/utils';

const reasons = ['同学代取', '路过自取', '下错订单', '无人车取消'];

const { Item } = Descriptions;
interface DetailProps {
    dispatch: Dispatch<any>;
    loading: boolean;
    currentUser: any;
    deliveryDetail: any;
    match: { params: { id: number } };
}

interface DetailState {
    showPwd: boolean;
    imgSize: number;
    imgRotate: number;
    rowId: number;
}

@connect(({
    logisCenterUnmannedDetail,
    user: { currentUser },
    loading,
}: any) => ({
    deliveryDetail: logisCenterUnmannedDetail,
    currentUser,
    loading: loading.effects['logisCenterUnmannedDetail/fetch'],
}))

class FranchiseeDetail extends React.Component<DetailProps, DetailState> {
    columns = [
        {
            title: '快递信息',
            dataIndex: 'address',
            width: 160,
        },
        {
            title: '快递单号',
            dataIndex: 'expNo',
            width: 160,
        },
        {
            title: '快递状态',
            dataIndex: 'status',
            width: 80,
        },
    ];

    columnsReasons = [
        {
            title: '原因',
            dataIndex: 'reason',
            width: 160,
            render: (text: string, record: any, index: number) => {
                return (<div key={index}>{record.reason > 0 ? reasons[record.reason - 1] : '--'}</div>)
            }
        },
    ]

    state: DetailState = {
        showPwd: false,
        imgSize: 1,
        imgRotate: 0,
        rowId: 0,
    }

    myRef: any = React.createRef();

    componentDidMount() {
        const {
            match: { params: { id } },
            currentUser,
        } = this.props;
        this.fetchDeliveryDetail(id);

        watermark(this.myRef.current, {
            watermark_txt: `中科富创 ${currentUser?.phone?.substring(7)}`,
        });
    }

    componentDidUpdate(prevProps: DetailProps) {
        const { match: { params: { id } } } = this.props;
        const { match: { params: { id: prevId } } } = prevProps;

        if (prevId !== id) this.fetchDeliveryDetail(id);
    }

    /**
     * 查询详情
     */

    fetchDeliveryDetail(id: number) {
        const { dispatch } = this.props;
        // console.log(dispatch)
        dispatch({
            type: 'logisCenterUnmannedDetail/fetch',
            payload: { orderId: id },
        });
    }

    render() {
        const { deliveryDetail } = this.props;

        const {
            billStatus = [],
        } = deliveryDetail;
        const showName = ['待送达', '已完成', '已取消'];

        return (
            <Fragment>
                <PageHeader />

                <div ref={this.myRef}>
                    <Card
                        bordered={false}
                        title="快递详情"
                        className="paddingB10"
                    >
                        <Descriptions bordered size="small">
                            <Item label="订单编号">{deliveryDetail.orderId}</Item>
                            <Item label="订单状态">{showName[deliveryDetail.status - 1]}</Item>
                            <Item label="学校">{deliveryDetail.schoolName || '--'}</Item>
                            <Item label="用户手机号">{deliveryDetail.userPhone === '10000000000' ? '隐私号码' : deliveryDetail.userPhone}</Item>
                            <Item label="送达地址">{deliveryDetail.stationName}</Item>
                            <Item label="配送时间">{deliveryDetail.deliverTime || '--'}</Item>
                            <Item label="备注信息">{deliveryDetail.comment || '--'}</Item>
                            <Item label="接单用户">{deliveryDetail.contactName} {deliveryDetail.contactPhone}</Item>
                            <Item label="订单金额">{(deliveryDetail.money || 0) / 100}</Item>
                            <Item label="下单时间">{deliveryDetail.createTime || '--'}</Item>
                            <Item label="送达时间/取消时间">{deliveryDetail.finishTime || '--'}</Item>
                        </Descriptions>
                    </Card>

                    <Card bordered={false} title="快递信息" className="paddingB10">
                        <Table
                            rowKey="index"
                            className="statementTable"
                            columns={this.columns}
                            dataSource={billStatus}
                            pagination={false}
                        />
                    </Card>
                    <Card bordered={false} title="取消原因" className="paddingB10">
                        <Table
                            rowKey="index"
                            className="statementTable"
                            columns={this.columnsReasons}
                            dataSource={[{ reason: deliveryDetail.reason }]}
                            pagination={false}
                        />
                    </Card>
                </div>

            </Fragment>
        );
    }
}

export default FranchiseeDetail;
